<template>
	<div>
		<div class="title">热销推荐</div>
		<ul>
			<li class="item border-bottom" v-for="item of recommendList" :key="item.id">
				<img class="item-img" :src="item.imgUrl" />
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-button">查看详情</button>
				</div>
			</li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
       <p class="all-product">查看所有产品</p>
	</div>
</template>

<script>
	export default {
		name: 'HomeRecommend',
		props:{
		'recommendList': Array
		},
		data() {
			return{
			// recommendList: [{
			// 		id: '0001',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/p0/1807/f2/f27eacd19c648261a3.img.jpg_200x200_8605bcf3.jpg',
			// 		title: '中国唐城',
			// 		desc: '历史悠久古建筑，妖猫传拍摄地'
			// 	},
			// 	{
			// 		id: '0002',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/p0/1705/f8/f84af4b19b279146a3.img.jpg_200x200_ceb0981c.jpg',
			// 		title: '襄阳深梦海底世界',
			// 		desc: '襄阳深梦海底世界'
			// 	},
			// 	{
			// 		id: '0003',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/p0/1504/18/187ed718f8c6eedf.water.jpg_200x200_2d0b28af.jpg',
			// 		title: '保康尧治河旅游区',
			// 		desc: '保康尧治河旅游区'
			// 	},
			// 	{
			// 		id: '0004',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/p0/1610/65/659790fb84dbf187a3.water.jpg_200x200_716ccd7d.jpg',
			// 		title: '无量台风景区',
			// 		desc: '无量台风景区'
			// 	}
			// ]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/styles/mixins.styl'

	.title {
		line-height: 20px;
		// border: 1px red solid;
		background: #eee;
		margin-top: -30px;
		text-indent: .2rem;
	}

	.item {
		overflow: hidden;
		display: flex;
		height: 100px;
	}

	.item-img {
		width: 100px;
		height: 100px;
		padding: 5px;
	}

	.item-info {
		// background:red;
		flex: 1;
		padding: 5px;
		min-width: 0;
	}

	.item-title {
		line-height: 40px;
		ellipsis();
	}

	.item-desc {
		line-height: 30px;
		color: #ccc;
		ellipsis();
	}

	.item-button {
		background: #ff9300;
		padding: 3px;
		border-radius: 10px;
		color: #fff;
		width:80px;
		height: 25px;
		line-height: 18px;
	}
	
	.all-product{
		height:30px;
		line-height:35px;
		text-align: center;
		color:#00afc7;
	}
</style>
